<template>
	<view class="flex_ZC">
		<view class="back flex_c">
			<image class="backimg" :src="baseUrl + '/static/icon/left_jt.png'" mode="aspectFill" @click="goBack">
			</image>
			<image class="shareimg" @click="shareflag=true"
				src="https://images.fudiemall.com/storage/default/20250423/shares5b7dae1773abdb5ee869f584b69936ca0a435c78.png"
				mode="aspectFill"></image>
		</view>
		<view class="swipers">
			<u-swiper :list="info.images" indicator indicatorMode="dot" circular bgColor="transparent" height="375">
			</u-swiper>
		</view>
		<view class="groupBuying">
			<image :src="baseUrl +'/static/image/tgimg.png'" mode="aspectFill"></image>
			<view class="groupBuying_top ">
				<view class="flex_ld">
					<view class=" flex_ld">
						<text class="f30 c0">￥</text>
						<text class="f48 c0 fw5 marr10">{{info.price}}</text>
						<text class="f28 c0 marr18">团购价</text>
						<view class="give">
							<text v-if="info.is_ticket == 0">赠{{info.integral_proportion}}%More值</text>
							<text v-if="info.is_ticket == 1">赠{{info.price}}More值</text>
						</view>
					</view>
					<text class="f24 c0">已售{{info.sales_init+info.sales_real}}+</text>
				</view>
				<view class=" flex_ld">
					<view class="flex_dq">
						<text class="f24 c0 marr10">{{info.original_price}}</text>
						<text class="f24 c0">原价</text>
					</view>
					<view class=" flex_dq">
						<u-rate class="marr10" readonly size="18" v-model="info.evaluate_rate"
							active-color="#FFFFFF"></u-rate>
						<text class="f24 c0">评价</text>
					</view>
				</view>
			</view>

			<view class="tg_name">
				<text class="f32 c3 fw5">{{info.name}}</text>
				<view class="interests_box" v-if="info.type==1">
					<text class="interests marr18" v-for="item in info.label_lists" :key="item">{{item}}</text>
					<!-- 	<text class="interests marr18">随时退</text>
					<text class="interests marr18">30内有效</text>
					<text class="interests marr18">过期自动退</text> -->
				</view>
				<view class="interests_box flex_dq" v-if="info.type==6">
					<text class="interests marr10" style="color: #FFC300;border: 1rpx solid #FFC300;">仅限增值服务劵支付</text>
					<text class="interests" style="color: #7BACE3;border: 1rpx solid #7BACE3;">自动生效</text>
				</view>
			</view>

			<view class="stores flex_Z" v-if="info.is_ticket == 0">
				<text class="f28 c3">适用门店</text>
				<view class="stores_box flex_dq">
					<image :src="info.seller.cover" mode="aspectFill"></image>
					<view class=" flex_Z">
						<text class="f28 c3 fw5">{{info.seller.name}}</text>
						<view class="f24 c9 mart14">营业时间 <br />
							<view v-for="item in info.seller.business_hours"> {{item.start}}至{{item.end}} </view>
						</view>
					</view>
				</view>
				<text class="f26 c3 overflow2">地址：{{info.seller.full_address}}{{info.seller.address}}</text>
			</view>
		</view>

		<view class="tg_detail flex_Z">
			<text class="f32 c3 fw7">团购详情</text>
			<view class="mart12 flex_Z">
				<view class="flex_ld" v-for="(item,index) in info.team_detail" :key="index">
					<text class="f28 c3">• {{item.name}} </text>
					<view class="menu ">
						<text class="f24 c6 mr20">({{item.number}} 份)</text>
						<text class="f28 c3">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="tg_detail flex_Z">
			<text class="f32 c3 fw7">购买须知</text>
			<view class="mart24 flex_Z" v-for="(item,index) in info.buy_note" :key="index">
				<view class="flex_dq">
					<image class="icons" :src="item.image" mode="aspectFill"></image>
					<text class="f28 c3 fw7 xuzhi">{{item.name}}：</text>
				</view>
				<text class="f28 c6 mart12">{{item.value}}</text>
			</view>

		</view>

		<view class="buynow flex_c" @click="payShow = true">
			<text v-if="info.is_ticket == 0" @click="clickBuynow">立即抢购（赠{{info.integral_proportion}}%More值）</text>
			<text v-if="info.is_ticket == 1" @click="clickBuynow">立即抢购（赠{{info.price}}More值）</text>
		</view>

		<view class="empty3"></view>

		<u-popup :show="payShow" mode="bottom" bgColor="#F5F5F5" :safeAreaInsetBottom=safeAreaInsetBottom round='15'
			@close="payShow = false">
			<view class="order_box flex_ZC">
				<text class="f36 c3 fw5">提交订单</text>
				<view class="commodity flex_dq">
					<view class="commodity_l">
						<image :src="info.image" mode="aspectFill"></image>
					</view>
					<view class="commodity_r">
						<view class="f32 c3 name ">{{info.name}}</view>
						<view class="interests_box flex_dq" v-if="info.type==1">
							<text class="interests marr10" v-for="item in info.label_lists " :key="item">{{item}}</text>
						</view>
						<view class="interests_box flex_dq" v-if="info.type==6">
							<text class="interests marr10"
								style="color: #FFC300;border: 1rpx solid #FFC300;">仅限增值服务劵支付</text> <text
								class="interests" style="color: #7BACE3;border: 1rpx solid #7BACE3;">自动生效</text>
						</view>
						<view class="mart18 flex_ld">
							<text class="f28 c6">团购价格</text>
							<text class="f28 c6">￥{{info.price}}</text>
						</view>
						<view class="mart18 flex_ld" v-if="info.type==1">
							<text class="f28 c6">团购数量</text>
							<u-number-box v-model="numbers" :max="1" inputWidth="24" buttonSize="24" bgColor="#ffffff"
								@overlimit="overlimit" @change="valChange"></u-number-box>
						</view>

						<view class="mart18 flex_ld" v-if="info.type==6&&info.is_stock==1&&info.total_stock>=100">
							<text class="f28 c6">团购数量 </text>
							<u-number-box v-model="numbers" :max="100" inputWidth="24" buttonSize="24" bgColor="#ffffff"
								@overlimit="overlimit" @change="valChange"></u-number-box>
						</view>
						<view class="mart18 flex_ld" v-if="info.type==6&&info.is_stock==1&&info.total_stock<100">
							<text class="f28 c6">团购数量 </text>
							<u-number-box v-model="numbers" :max="info.total_stock" inputWidth="24" buttonSize="24"
								bgColor="#ffffff" @overlimit="overlimit" @change="valChange"></u-number-box>
						</view>
						<view class="mart18 flex_ld" v-if="info.type==6&&info.is_stock==0&&info.total_stock==0">
							<text class="f28 c6">团购数量 </text>
							<u-number-box v-model="numbers" :max="100" inputWidth="24" buttonSize="24" bgColor="#ffffff"
								@overlimit="overlimit" @change="valChange"></u-number-box>
						</view>
						<view class="f26 c6  " v-if="info.type==6" style="margin-top: 10rpx;color: #c8c9cc;">单笔最大购买100份
						</view>
					</view>

				</view>

				<view class="coupon flex_ld" v-if=" Number(user.money)>=0.01 &&info.type==1">
					<view class="coupon_l flex_dq">
						<image :src="baseUrl +'/static/icon/i_dk.png'" mode="aspectFill"></image>
						<text class="f30 c3">使用More券抵扣</text>
					</view>
					<view class="coupon_r flex_dq" @click="changeCoupons">
						<text class="f28 c3">{{user.money}}</text>
						<image v-if="!isMoney" class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'"
							mode="aspectFill">
						</image>
						<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="coupon flex_ld" v-if="Number(user.money)<0.01&&info.type==1">
					<view class="coupon_l flex_dq">
						<image :src="baseUrl +'/static/icon/i_dk.png'" mode="aspectFill"></image>
						<text class="f30 c3">More券余额不足</text>
					</view>
					<view class="coupon_r flex_dq" @click="changeCoupons">
						<text class="f28 c3">{{user.money}}</text>

					</view>
				</view>
				<view class="coupon flex_ld" v-if="info.type==6">
					<view class="coupon_l flex_dq">
						<image
							src="https://images.fudiemall.com/storage/default/20250508/dq802c09cef1740f3b7908a41849214a730d323980.png"
							mode="aspectFill"></image>
						<text class="f30 c3">增值服务点券</text>
					</view>
					<view class="coupon_r flex_dq">
						<text class="f28 c3">{{user.service_voucher}}</text>

					</view>
				</view>
				<view class="settlement flex_ld">
					<view class=" flex_dq">
						<text class="f28 c3">合计：</text>
						<text class="f48 c4 fw5">{{totalPrice}}</text>
					</view>
					<text class="submit" @click="isPlaceOrder">提交订单</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">尚�More券交易密码？</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="tipShow = false">取消</text>
					<text @click="goPayPwd">去设置</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="tipShowTwo" mode="center" @close="tipShowTwo = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<image class="gghimg" :src="baseUrl+  '/static/image/gzhewm.jpg'" mode="widthFix"
					:show-menu-by-longpress="true" @longpress="handleLongPress"></image>
				<text class="prompt_tit">长按图片二维码扫描</text>
				<text class="prompt_tit fw7">请使用微信公众号支付</text>
			</view>
		</u-popup>

		<u-keyboard ref="uKeyboard" dotDisabled mode="number" bgColor="transparent" closeOnClickOverlay :tooltip="false"
			:show="keyboardShow" @close="isClose" @change="changePwd" @backspace="backspace">
			<view class="keyboardss flex_ZC">
				<u-code-input dot space="26" :maxlength="6" v-model="securityPwd"></u-code-input>
			</view>
		</u-keyboard>
		<u-popup :show="shareflag" mode="bottom" :safeAreaInsetBottom="false" @close="shareflag=false" :closeable="true"
			bgColor="transparent" :closeOnClickOverlay="false">
			<view class="sharewrap">
				<view class="shareitem" @click="copyCurrentPagePath">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/lianjie05d677a617d5cae918b1e8e456dc3f53231a46c6.png"
						mode="aspectFill"></image>
					<text>复制链接</text>
				</view>
				<view class="shareitem" v-if="!iswxflag"
					@click="hbflag=true,shareflag=false,canvasDraw(info,qrcodeimg)">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/fenxianghaibao998f386470e2bc1bae873632b1d6a65088c0d571.png"
						mode="aspectFill"></image>
					<text>分享海报</text>
				</view>
				<view class="shareitem" v-if="iswxflag" @click="shareToWechat">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/wx9be87cb35b101c40f077a2c04ea9deaa8478182c.png"
						mode="aspectFill"></image>
					<text>分享到微信</text>
				</view>

				<view class="shareitem" @click="gosharelist">
					<image
						src="https://images.fudiemall.com/storage/default/20250522/groupchat8347f23f96f5df3c93e9b39b84ec236f0685722e.png"
						mode="aspectFill"></image>
					<text>分享到群聊</text>
				</view>
				<!-- #ifdef MP-ALIPAY -->
				<view class="shareitem">
					<image :src="baseUrl+ '/static/image/shareapliay.png'" mode="aspectFill"></image>
					<text>分享到支付宝</text>
					<button open-type="share" class="sharebtn"></button>
				</view>
				<!-- #endif -->
			</view>
		</u-popup>
		<u-popup :show="hbflag" mode="center" @close="hbflag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="hbwraps">
				<canvas style="width: 690rpx; height: 708rpx;margin: 0 auto;" canvas-id="inviteCanvas"
					id="inviteCanvas"></canvas>
				<view class="btn" @click="save1">
					保存图片
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	// #ifdef H5 
	import wx from 'weixin-js-sdk';
	// #endif
	
	import {
		myuser
	} from "../../api/user.js"
	import {
		goodsdetail,
		createorder
	} from "../../api/local.js"
	import {
		qrcode,
		wxConfig,
		shareMall
	} from "../../api/other.js"
	import {
		envflag
	} from '../../utils/request.js';
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				value: 4,
				numbers: 1,
				payShow: false,
				isMoney: false, //是否选中
				safeAreaInsetBottom: false, //底部兼容
				list1: ['https://pic1.imgdb.cn/item/67736de0d0e0a243d4ecfa06.png',
					'https://pic1.imgdb.cn/item/67736de0d0e0a243d4ecfa06.png'
				],
				id: "",
				info: {
					seller: {
						name: ""
					}
				},
				user: {},
				tipShow: false,
				payPasword: 0,
				keyboardShow: false,
				secreShow: false, //免密
				tipShowTwo: false,
				securityPwd: "",
				shareflag: false,
				hbflag: false,
				invite_code: "",
				iswxflag: false,
				fullPath: "",
				ishaveurl: false,
				shorturl: ""
			}
		},
		onLoad(e) {
			// navigation 跳转携带参数或者扫描支付宝小程序自身的分享
			if (e.id) {
				this.id = e.id
			}
			// 关联二维码携带的参数
			if (uni.getStorageSync("quick_payparam")) {
				this.id = uni.getStorageSync("quick_payparam")
			}
			// 扫描小程序自身分享的小程序码， 关联二维码携带的邀请码在app.vue中已经保存过了
			if (e.invite_code) {
				uni.setStorageSync('inviteCode', e.invite_code)
				if (uni.getStorageSync("seller_id")) {
					uni.removeStorageSync("seller_id")
				}
			}
			if (!uni.getStorageSync("token")) {
				// 没有登录保存跳转的url和参数，去重新登录
				uni.setStorageSync("quick_pay", `/pagesMy/groundCat/groupBuyingDetails?id=${this.id}`)
				uni.showToast({
					title: "未授权认证，请登录",
					icon: "none"
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pageLogin/login/login'
					})
					uni.hideToast()
				}, 1000)
			} else {
				// 删除保存的url路径和参数
				uni.removeStorageSync("quick_payparam")
				uni.removeStorageSync("quick_pay")
			}
			return
			
			
			// if (e) {
			// 	this.id = e.id
			// 	if (e.invite_code) {
			// 		this.ishaveurl = true
			// 		uni.setStorageSync('inviteCode', e.invite_code)
			// 	}
			// 	if (!uni.getStorageSync("token")) {
			// 		uni.setStorageSync("quick_pay", `/pagesMy/groundCat/groupBuyingDetails?id=${this.id}`)
			// 		uni.showToast({
			// 			title: "未授权认证，请登录",
			// 			icon:"none"
			// 		})
			// 		setTimeout(() => {
			// 			uni.redirectTo({
			// 				url: '/pageLogin/login/login'
			// 			})
			// 			uni.hideToast()
			// 		}, 1000)
			// 	} else {
			// 		uni.removeStorageSync("quick_pay")

			// 	}
			// }
		},
		onShareAppMessage(res) {
			return {
				title: "福叠猫",
				path: "/pagesMy/groundCat/groupBuyingDetails?id=" + this.id + "&invite_code=" + this.user.invite_code,
				imageUrl: this.info.image,
				desc: "福叠猫是本地生活圈的综合消费平台"
			}
		},
		onShow() {
			// 支付宝小程序扫码跳转
			// // #ifdef MP-ALIPAY
			// const options = my.getLaunchOptionsSync();
			// if (options.query) {
			// 	// 获取二维码完整链接
			// 	let qrCode = options.query.qrCode
			// 	let page = qrCode.split('?')[1].split('&')[0]
			// 	let inviteCode = qrCode.split('?')[1].split('&')[1]
			// 	this.id = page.split('=')[1]
			// 	if (inviteCode) {
			// 		this.ishaveurl = true
			// 		uni.setStorageSync('inviteCode', inviteCode.split('=')[1])
			// 	}

			// 	if (!uni.getStorageSync("token")) {
			// 		uni.setStorageSync("quick_pay", `/pagesMy/groundCat/groupBuyingDetails?id=${page.split('=')[1]}`)
			// 		uni.showToast({
			// 			title: "未授权认证，请登录",
			// 			icon:"none"
			// 		})
			// 		setTimeout(() => {
			// 			uni.redirectTo({
			// 				url: '/pageLogin/login/login'
			// 			})
			// 			uni.hideToast()
			// 		}, 1000)
			// 	} else {
			// 		uni.removeStorageSync("quick_pay")
			// 	}
			// }
			// // #endif
			setTimeout(() => {
				if(uni.getStorageSync("token")){
					this.getmyuser()
					this.getqrcode()
					this.getdetail()
					this.getEnv()
				}
				
			}, 500)

		},
		computed: {
			// 计算总价
			totalPrice() {
				console.log(this.info);
				if (this.info.type == 1) {
					if (this.isMoney) {
						if (Number(this.user.money) - Number(this.info.price) * this.numbers >= 0) {
							return 0.01
						} else {
							return (Number(this.info.price) * this.numbers - (this.user.money)).toFixed(2);
						}
					} else {
						return (Number(this.info.price) * this.numbers).toFixed(2);
					}
				} else if (this.info.type == 6) {


					return (Number(this.info.price) * this.numbers).toFixed(2)

				}
			},
		},
		watch: {
			securityPwd(newValue) {
				console.log(newValue.length);
				if (newValue.length >= 6) {
					this.keyboardShow = false
					this.isBuyNow()
				}
			}
		},
		methods: {
			shareMalls() {
				shareMall({
					task_code: "share_mall"
				}).then(res => {

				})
			},
			gosharelist() {
				uni.navigateTo({
					url: "/pageDao/groupchat/sharelist?id=" + this.id + "&type=4"
				})
			},
			shareToWechat() {
				this.shareflag = false
				// 这里可以通过弹窗等方式引导用户点击微信右上角菜单进行分享
				uni.showModal({
					title: '分享提示',
					content: '请点击微信右上角菜单进行分享',
					showCancel: false
				});
				this.shareMalls()
			},
			getEnv() {
				let isfrom;
				// 小程序环境判断
				// #ifdef MP-WEIXIN
				try {
					const systemInfo = uni.getSystemInfoSync();
					console.log(systemInfo)
					if (systemInfo.platform === 'devtools') {
						isfrom = '浏览器开发者工具';
					} else if (systemInfo.app) {
						const app = systemInfo.app.toLowerCase();
						if (app.includes('alipay')) {
							isfrom = '支付宝小程序';
						} else if (app.includes('micromessenger')) {
							isfrom = '微信小程序';
						}
					}
				} catch (error) {
					// 如果 uni.getSystemInfoSync 报错，说明可能不是小程序环境
				}
				// #endif
				// #ifdef H5
				if (!isfrom) {
					const ua = navigator.userAgent.toLowerCase();
					if (ua.match(/Alipay/i)) {
						isfrom = '支付宝浏览器';
					} else if (ua.match(/MicroMessenger/i)) {
						isfrom = '微信内置浏览器';
						this.iswxflag = true
					} else {
						isfrom = '普通浏览器';
					}
				}
				// #endif

				// H5环境判断


				// 跳转逻辑
				if (isfrom === "微信小程序" || isfrom === "微信内置浏览器") {
					// 这里可以添加微信相关的跳转逻辑
				} else {

				}
				return isfrom;
			},
			setShareConfig() {
				// 分享到朋友圈
				let that = this
				wx.updateTimelineShareData({
					title: that.info.name,
					link: that.fullPath,
					imgUrl: that.info.image,
					desc: '福叠猫地猫团购详情', // 分享描述
					success() {

						console.log('分享到朋友圈成功');
					},
					cancel() {
						console.log('取消分享到朋友圈');
					}
				});

				// 分享给好友
				wx.updateAppMessageShareData({
					title: that.info.name,
					link: that.fullPath,
					imgUrl: that.info.image,
					desc: '福叠猫地猫团购详情', // 分享描述
					success() {

						console.log('分享给好友成功');
					},
					cancel() {
						console.log('取消分享给好友');
					}
				});
			},
			getwxconfig() {
				wxConfig({
					id: this.id,
					type: 3
				}).then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData',
							'updateTimelineShareData'
						] // 必填，需要使用的 JS 接口列表
					});
					wx.ready(() => {
						this.setShareConfig()
						console.log("准备好了")
					});
				})
			},
			getqrcode() {
				qrcode({
					id: this.id,
					type: 3
				}).then(res => {
					this.qrcodeimg = res.data
				})
			},
			copyCurrentPagePath() {
				uni.setClipboardData({
					data: this.fullPath,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
				// 复制路径到剪贴板

			},

			saveImageToPhone(imageUrl) {
				// 创建一个新的 Image 对象
				const img = new Image();
				img.crossOrigin = 'anonymous'; // 允许跨域
				img.src = imageUrl;
				console.log(img, "sssss")
				img.onload = () => {
					// 创建一个 canvas 元素
					const canvas = document.createElement('canvas');
					const ctx = canvas.getContext('2d');

					// 设置 canvas 的宽度和高度与图片一致
					canvas.width = img.width;
					canvas.height = img.height;

					// 在 canvas 上绘制图片
					ctx.drawImage(img, 0, 0);

					// 将 canvas 内容转为图片 URL
					const dataURL = canvas.toDataURL('image/png');

					// 创建一个 a 标签
					const a = document.createElement('a');
					a.href = dataURL;
					a.download = 'image.png'; // 设置下载的文件名为 image.png

					// 模拟点击 a 标签，触发下载
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);
				};
			},
			save1() {
				var that = this
				console.log(123456);
				uni.canvasToTempFilePath({
					canvasId: 'inviteCanvas',
					success: function(res) {
						// #ifdef H5
						that.saveImageToPhone(res.tempFilePath)
						// #endif

						// #ifdef MP-WEIXIN || MP-ALIPAY
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.$u.toast("保存成功")
							},
							fail: function() {
								uni.$u.toast("保存失败")
							}
						});
						// #endif


					},
					fail(reg) {
						console.log(reg);
					}
				})
			},


			async canvasDraw(data, qrcodeimg) {
				var ctx = uni.createCanvasContext('inviteCanvas', this)
				const screenWidth = uni.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				const rpxToPx = screenWidth / 750; // 计算 rpx 转 px 比例
				// 绘制圆角矩形路径（参数：x, y, width, height, 圆角半径）
				ctx.clearRect(0, 0, 690 * rpxToPx, 708 * rpxToPx);
				let avatarUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: data.image ||
							"https://images.fudiemall.com/storage/default/20250422/Q7axiJ420qRjZYfb247de39baf0adba9a88e8a2e57cb4daa2ec7e06.png",
						success: function(image) {
							console.log(image, "获取头像信息")
							resove(image.path)
						}
					});
				})
				let codeUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: qrcodeimg,
						success: function(image) {
							console.log(image, "获取图片信息")
							resove(image.path)
						}
					});
				})
				const x = 0,
					y = 0,
					width = 690 * rpxToPx,
					height = 708 * rpxToPx,
					radius = 12;
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5); // 左上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2); // 右上角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5); // 右下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI); //左下角
				// 设置填充颜色（支持 HEX、RGB、RGBA）
				ctx.setFillStyle('#ffffff');
				// 填充路径
				ctx.fill();

				const srcX = 32 * rpxToPx, //左上角x坐标
					srcY = 32 * rpxToPx, //左上角y坐标
					srcWidth = 628 * rpxToPx, //图片宽度
					srcHeight = 392 * rpxToPx; //图片高度
				ctx.drawImage(avatarUrl, srcX, srcY, srcWidth, srcHeight)
				ctx.setFillStyle('#333333');
				ctx.setFontSize(40 * rpxToPx)
				const nickname = data.name,
					nicknameX = 32 * rpxToPx, //左上角x坐标
					nicknameY = 478 * rpxToPx; //左上角y坐标
				ctx.fillText(nickname, nicknameX, nicknameY)

				ctx.setFillStyle('#333333');
				ctx.setFontSize(24 * rpxToPx)
				const tit1 = "服务保障",
					tit1X = 32 * rpxToPx, //左上角x坐标
					tit1Y = 548 * rpxToPx; //左上角y坐标
				ctx.fillText(tit1, tit1X, tit1Y)

				ctx.setFillStyle('#666666');
				ctx.setFontSize(24 * rpxToPx)
				const content = data.label_lists,

					contentX = 32 * rpxToPx, //左上角x坐标
					contentY = 588 * rpxToPx; //左上角y坐标
				ctx.fillText(content, contentX, contentY)

				ctx.setFillStyle('#333333');
				ctx.setFontSize(24 * rpxToPx)
				const tit2 = "有效期",
					tit2X = 32 * rpxToPx, //左上角x坐标
					tit2Y = 628 * rpxToPx; //左上角y坐标
				ctx.fillText(tit2, tit2X, tit2Y)

				ctx.setFillStyle('#666666');
				ctx.setFontSize(24 * rpxToPx)
				const content1 = data.buy_note[0].value,

					content1X = 32 * rpxToPx, //左上角x坐标
					content1Y = 668 * rpxToPx; //左上角y坐标
				ctx.fillText(content1, content1X, content1Y)
				const srcX1 = 520 * rpxToPx,
					srcY1 = 518 * rpxToPx,
					srcWidth1 = 120 * rpxToPx,
					srcHeight1 = 120 * rpxToPx;
				ctx.drawImage(codeUrl, srcX1, srcY1, srcWidth1, srcHeight1)
				ctx.setFillStyle('#333333');
				ctx.setFontSize(24 * rpxToPx)
				const tips = "扫一扫",
					tipsX = 548 * rpxToPx, //左上角x坐标
					tipsY = 668 * rpxToPx; // 根据 address 高度确定起始 y 坐标
				ctx.fillText(tips, tipsX, tipsY)
				// 执行绘制
				setTimeout(() => {
					ctx.draw();
				}, 1000)
			},
			isBuyNow() {
				let token = uni.getStorageSync('token');

				if (token) {
					let data = {
						type: '1',
						is_money: this.isMoney ? 1 : 0,
						goods_id: this.id,
						pay_password: this.securityPwd,
						number: this.numbers
					}
					console.log(data);
					createorder(data).then(res => {
						console.log('详情', res)
						if (res.code == 1) {
							this.payShow = false
							if (res.data.status == 1) {
								uni.navigateTo({
									url: '/pagesMy/cloudCat/paymentCenter?type=2' + '&id=' + res.data.id +
										'&totalPrice=' + this.totalPrice
								})
								return
							}
							uni.$u.toast(res.msg)
							if (this.isMoney) {
								setTimeout(function() {
									uni.redirectTo({
										url: '/pagesMy/cloudCat/paySuccess?type=2'
									})
								}, 1200);
							} else {
								uni.navigateTo({
									url: '/pagesMy/cloudCat/paymentCenter?type=2' + '&id=' + res.data.id +
										'&totalPrice=' + this.totalPrice
								})
							}

						} else {
							// 清空密码
							this.securityPwd = ''
						}
					})
				} else {
					uni.navigateTo({
						url: '/pageLogin/login/login'
					})
				}
			},
			isNext() {
				let token = uni.getStorageSync('token');

				if (token) {
					let data = {
						type: '3',
						is_money: 0,
						goods_id: this.id,
						pay_password: this.securityPwd,
						number: this.numbers
					}
					console.log(data);
					createorder(data).then(res => {
						console.log('详情', res)
						if (res.code == 1) {
							if (res.data.status == 1) {
								uni.navigateTo({
									url: '/pagesMy/cloudCat/otherpaymentCenter?' + 'id=' + res.data.id +
										'&totalPrice=' + this.totalPrice
								})
								return
							} else {
								uni.$u.toast(res.msg)
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pageLogin/login/login'
					})
				}
			},
			isPlaceOrder() {
				// #ifdef H5 || MP-ALIPAY
				if (this.info.type == 1) {
					if (this.isMoney) {
						// if (this.payPasword) {
						// 	let allMoney = Number(this.totalPrice);
						// 	console.log(allMoney)
						// 	if (this.secreShow) {
						// 		this.isBuyNow()
						// 	} else {
						// 		this.keyboardShow = true
						// 		this.payShow = false
						// 	}
						// } else {
						// 	this.payShow = false
						// 	this.tipShow = true
						// }
						this.isBuyNow()
					} else {
						this.isBuyNow()
					}
				} else if (this.info.type == 6) {
					if (this.payPasword) {
						if (Number(this.user.service_voucher) - Number(this.info.price) * this.numbers >= 0) {
							this.isNext()
						} else {
							uni.$u.toast("增值服务点券余额不足")
						}
					} else {
						this.payShow = false
						this.tipShow = true
					}

				}


				// #endif
				// #ifdef MP-WEIXIN
				this.payShow = false
				this.tipShowTwo = true

				// if (this.isMoney) {
				// 	if (this.payPasword) {
				// 			if(this.secreShow){
				// 				this.isBuyNow()
				// 			}else{
				// 				this.keyboardShow = true
				// 				this.payShow = false
				// 			}
				// 	} else {
				// 		this.payShow = false
				// 		this.tipShow = true
				// 	}
				// } else {
				// 	this.isBuyNow()
				// }

				// #endif
				// // #ifdef MP-ALIPAY

				// this.isBuyNow()
				// // #endif


			},
			isClose() {
				this.keyboardShow = false
				this.payShow = true
			},
			// 输入密码
			changePwd(val) {
				if (this.securityPwd.length < 6) {
					this.securityPwd += val;
					// console.log(this.securityPwd);
				} else {
					console.log('超出不累计');
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
			goPayPwd() {
				uni.navigateTo({
					url: '/pageUser/myuser/amendsafepassword'
				})
			},
			getmyuser() {
				myuser().then(res => {

					this.user = res.data
					if (envflag) {
						this.fullPath =
							`https://h5.fudiemall.com/#/pagesMy/groundCat/groupBuyingDetails?id=${this.id}&invite_code=${this.user.invite_code}`
					} else {
						this.fullPath =
							`https://h5-test.fudiemall.com/#/pagesMy/groundCat/groupBuyingDetails?id=${this.id}&invite_code=${this.user.invite_code}`
					}
					this.secreShow = res.data.secret_free
					this.payPasword = res.data.is_pay_pasword
				})
			},
			getdetail() {
				goodsdetail({
					id: this.id
				}).then(res => {
					this.info = res.data
					// #ifdef H5|| MP-WEIXIN
					this.getwxconfig()
					// #endif
				})
			},
			//获取页面栈的长度
			goBack() {
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			clickBuynow() {
				console.log(22222);
			},
			// 步进器
			valChange(e) {
				let maxQuantity;
				if (this.info.type === 6 && this.info.is_stock === 1 && this.info.total_stock >= 100) {
					maxQuantity = 100;
				} else if (this.info.type === 6 && this.info.is_stock === 1 && this.info.total_stock < 100) {
					maxQuantity = this.info.total_stock;
				} else if (this.info.type === 6 && this.info.is_stock === 0 && this.info.total_stock === 0) {
					maxQuantity = 100;
				}
				if (e.value > 100) {
					uni.$u.toast('超出范围!')
					this.numbers = maxQuantity;
				} else if (e.value > maxQuantity) {
					this.numbers = maxQuantity;
				} else {
					this.numbers = e.value;
				}
				console.log('当前值为: ' + e.value)
			},
			overlimit() {
				uni.$u.toast('超出范围!')
			},
			// 免密支付
			handleLongPress(e) {
				console.log(e);
			},
			// 选用抵扣券
			changeCoupons() {
				this.isMoney = !this.isMoney
			},

		},
	}
</script>

<style scoped>
	.sharebtn {
		width: 150rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
	}
	.btn {
		width: 690rpx;
		height: 76rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 76rpx;
		margin-top: 30rpx;
	}

	.hbwraps {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		/* background: #ffffff; */
		height: 800rpx;
	}

	.sj_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 386rpx;
		z-index: 2;
	}

	.sharewrap {
		width: 750rpx;
		height: 200rpx;
		background: #F7F7F7;
		display: flex;
		/* flex-wrap: wrap; */
		/* display: flex; */
	}

	.shareitem {
		width: 150rpx;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;
		position: relative;
	}

	.shareitem>text {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-top: 14rpx;
	}

	.shareitem>image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
	}

	.back {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 150rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.sharewrap {
		width: 750rpx;
		height: 200rpx;
		background: #F7F7F7;
		display: flex;
		/* flex-wrap: wrap; */
		/* display: flex; */
	}

	.shareitem {
		width: 150rpx;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;

	}

	.shareitem>text {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-top: 14rpx;
	}

	.shareitem>image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
	}

	.backimg {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.shareimg {
		position: absolute;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
		z-index: 666;
	}

	.swipers {
		position: relative;
		width: 750rpx;
		z-index: 2;
	}

	.groupBuying {
		position: relative;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		margin-top: 26rpx;
	}

	.groupBuying>image {
		width: 100%;
		height: 154rpx;
	}

	.groupBuying_top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 154rpx;
		padding: 0 24rpx;
	}

	.give {
		padding: 0rpx 10rpx;
		font-weight: 500;
		text-align: center;
		font-size: 24rpx;
		color: #F72535;
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.marr10 {
		margin-right: 10rpx;
	}

	.marr18 {
		margin-right: 18rpx;
	}

	.name {
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tg_name {
		width: 650rpx;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f2f2f2f2;
		margin: 0 auto;
	}

	.interests {
		font-size: 24rpx;
		color: #666666;
		border-radius: 6rpx;
		padding: 4rpx 8rpx;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		margin-top: 6rpx;
	}

	.interests_box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.stores {
		width: 100%;
		padding: 24rpx;
	}

	.stores_box {
		margin: 18rpx 0;
	}

	.stores_box>image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}

	.tg_detail {
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		margin-top: 24rpx;
		padding: 30rpx 24rpx 20rpx;
	}

	.icons {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.mart12 {
		margin-top: 14rpx;
	}

	.mart24 {
		margin-top: 24rpx;
	}

	.menu {
		display: flex;
		justify-content: center;
		align-items: baseline;
		/* background: pink; */
	}

	.menu>text:nth-child(1) {
		width: 100rpx;
		text-align: right;
		margin-top: 10rpx;
	}

	.menu>text:nth-child(2) {
		width: 80rpx;
		text-align: right;
	}

	.buynow {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
	}

	.buynow>text {
		width: 696rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.order_box {
		width: 750rpx;
		min-height: 690rpx;
		background: #F5F5F5;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 24rpx 30rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity {
		width: 690rpx;
		min-height: 320rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 18rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity_l {
		margin: 0 24rpx;
	}

	.commodity_l>image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 12rpx;
	}

	.commodity_r {
		width: 400rpx;
	}

	.mart18 {
		margin-top: 18rpx;
	}


	.coupon {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx 24rpx;
	}

	.coupon_l>image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
		margin-left: 12rpx;
	}

	.settlement {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 142rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
	}

	.submit {
		width: 242rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		font-size: 32rpx;
		background: #FFC300;
		text-align: center;
		border-radius: 40rpx;
	}

	/deep/.u-number-box__minus {
		width: 24px !important;
		height: 24rpx;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;

	}

	/deep/.u-number-box__plus {
		width: 24px !important;
		border: 1rpx solid #999999;
		border-radius: 8rpx !important;
	}

	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border: 1rpx solid #FFC300;
		border-radius: 40rpx;
		color: #FFC300;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #FFC300;
		border-radius: 40rpx;
		color: #ffffff;
	}

	.gghimg {
		width: 300rpx;
		height: 300rpx;
		margin-top: 30rpx;
	}

	.keyboardss {
		width: 750rpx;
		padding: 50rpx 0;
		background: #ffffff;
	}
</style>